<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="js/vendor/d3.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
	(function () {
		var dataArray = getRandomData();
		var canvasHeight = 280;
		var canvasWidth = 600;

		var maxValue = Math.max.apply(this, dataArray);

		var widthScale = d3.scale
			.linear()
			.domain([0, maxValue])
			.range([0, canvasWidth - 20]);

		var colorScale = d3.scale
			.linear()
			.domain([0, maxValue])
			.range(["red", "blue"]);

		var svg = d3
			.select("body")
			.append("svg")
			.attr("height", canvasHeight)
			.attr("width", canvasWidth);

		svg.append("rect").attr("fill", "#cccccc").attr("width", canvasWidth).attr("height", canvasHeight);

		var canvas = svg.append("g").attr("transform", "translate(10,10)");

		var axis = d3.svg.axis().scale(widthScale).ticks(5);

		var bars = canvas.selectAll("rect")
			.data(dataArray)
			.enter()
			.append("rect")
			.attr("x", function (d) {
				return 0;
			})
			.attr("y", function (d, i) {
				return i * 10;
			})
			.attr("fill", function (d) {
				return colorScale(d);
			})
			.transition()
			.attr("width", function (d) {
				return widthScale(d);
			})
			.attr("height", function (d) {
				return 5;
			});

		canvas.append("g")
			.attr("transform", "translate(0,200)")
			.call(axis);

		setInterval(function () {
			canvas.selectAll("rect").data(getRandomData())
				.transition()
				.attr("height", function (d) {
					return 5;
				})
				.attr("width", function (d) {
					return widthScale(d);
				})
				.attr("x", function (d) {
					return 0;
				})
				.attr("y", function (d, i) {
					return i * 10;
				})
				.attr("fill", function (d) {
					return colorScale(d);
				});
		}, 1000);

		function getRandomData() {
			var d = [];
			for (var n = 0; n < 20; n++) {
				d[d.length] = Math.floor(Math.random() * n) + 5;
			}
			return d;
		}
	}());
</script>
</body>
</html>